<template>
  <div class="wrapper">
    <div style="margin: 150px auto; background-color: #fff; width: 350px; height: 400px; padding: 20px; border-radius: 10px">
      <div style="margin: 20px 0; text-align: center; font-size: 24px"><b>注 册</b></div>
      <el-form :model="user" :rules="rules" ref="userForm">
        <el-form-item prop="username">
          <el-input placeholder="请输入账号" size="medium" prefix-icon="el-icon-user" v-model="user.username"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" size="medium" prefix-icon="el-icon-lock" show-password v-model="user.password"></el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input placeholder="请确认密码" size="medium" prefix-icon="el-icon-lock" show-password v-model="user.confirmPassword"></el-input>
        </el-form-item>
        <el-form-item prop="phone">
          <el-input placeholder="请输入手机号" size="medium" prefix-icon="el-icon-phone" v-model="user.phone">
            <template #append>
              <el-button @click="sendCode" :disabled="codeDisabled">
                {{ codeButtonText }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input placeholder="请输入验证码" size="medium" prefix-icon="el-icon-message" v-model="user.code"></el-input>
        </el-form-item>
        <el-form-item style="margin: 5px 0; text-align: right">
          <el-button type="primary" size="small" autocomplete="off" @click="register">注册</el-button>
          <el-button type="warning" size="small" autocomplete="off" @click="$router.push('/login')">返回登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      user: {},
      codeDisabled: false,
      codeButtonText: '获取验证码',
      countdown: 60,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请输入验证码', trigger: 'blur' },
          { pattern: /^\d{4,6}$/, message: '验证码格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    register() {
      this.$refs['userForm'].validate((valid) => {
        if (valid) {
          if (this.user.password !== this.user.confirmPassword) {
            this.$message.error("两次输入的密码不一致")
            return
          }
          this.request.post("/user/register", this.user).then(res => {
            if(res.code === 200) {
              this.$message.success("注册成功")
              this.$router.push('/login')
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      })
    },
    sendCode() {
      if (!this.user.phone) {
        this.$message.error('请输入手机号')
        return
      }
      if (!/^1[3-9]\d{9}$/.test(this.user.phone)) {
        this.$message.error('手机号格式不正确')
        return
      }

      this.codeDisabled = true
      this.request.get("/user/sms/send", { params: { phone: this.user.phone } }).then(res => {
        if (res.code === 200) {
          this.$message.success('验证码已发送')
          this.startCountdown()
        } else {
          this.$message.error(res.msg)
          this.codeDisabled = false
        }
      }).catch(() => {
        this.codeDisabled = false
      })
    },
    startCountdown() {
      const timer = setInterval(() => {
        this.countdown--
        this.codeButtonText = `${this.countdown}秒后重新获取`
        if (this.countdown <= 0) {
          clearInterval(timer)
          this.codeButtonText = '获取验证码'
          this.countdown = 60
          this.codeDisabled = false
        }
      }, 1000)
    }
  }
}
</script>

<style>
.wrapper {
  height: 100vh;
  background-image: linear-gradient(to bottom right, #FC466B , #3F5EFB);
  overflow: hidden;
}
</style>